<template>
	<!--评论-->
	<div class="common-layout">
		<el-container>

			<el-header></el-header>

			<el-container>
				<!--头像-->
				<el-aside width="100px" style="text-align: center;"><el-avatar :src="props.user_tx">
					</el-avatar></el-aside>

				<el-main>
					<el-row :span=12 :gutter="0">
						<!--用户名-->
						<el-col :span="3" style="text-align: left;" class="t1">
							<div class="grid-content ep-bg-purple" />
							<div>{{props.user_name}}</div>
						</el-col>
						<!--时间-->
						<el-col :span="6" style="text-align: left;" class="t1">
							<div class="grid-content ep-bg-purple-light" style="text-align: left;" />
							{{props.comments_date}}
						</el-col>
					</el-row>
					<!--内容-->
					<el-row :gutter="0">
						<el-col :span="14" style="text-align: left;" class="t2">
							<div class="grid-content ep-bg-purple" />{{props.comments_main}}
						</el-col>
						<el-col :span="6">
							<el-button-group>
								<el-button @click="toGood">
									<el-icon>
										<Check />
									</el-icon>
									{{good?"已点赞":"点赞"}}
								</el-button>
								<el-button @click="toGood">{{tu}}</el-button>
							</el-button-group>
						</el-col>
						<el-col :span="2">
							<el-button @click="toBed()">
								<el-icon>
									<ChatLineRound />
								</el-icon>
								{{bed?"已举报":"举报"}}
							</el-button>
						</el-col>
					</el-row>

				</el-main>
			</el-container>
		</el-container>
		<!--分割线-->
		<el-divider />
	</div>
</template>

<script setup>
	import * as ElementPlusIconsVue from '@element-plus/icons-vue';
	import {
		ref,
		reactive,
		onMounted,
		onUpdated,
		onBeforeUnmount
	} from 'vue';
	import axios from 'axios';
	//--------------------------- 详显 页面---------------------------
	// 详显组件引用 -> 绑定到
	/* const detailPageRef = ref();
	const show = (obj) => {
		detailPageRef.value.handleDetailData(obj);
	}; */
	//设置组件功能
	const props = defineProps({
		//评论id
		comments_id: {
			type: Number,
			default: 0
		},
		//评论基本信息
		comments_main: {
			type: String,
			default: ""
		},
		comments_date: {
			type: String,
			default: ""
		},
		comments_tu: {
			type: Number,
			default: 0
		},
		user_name: {
			type: String,
			default: ""
		},
		user_tx: {
			type: String,
			default: ""
		},
		comments_state: {
			type: Number,
			default: 1
		},
		num: {
			type: Boolean,
			default: true
		}
	});

	//点赞状态
	const good = ref(false);
	const tu = ref(props.comments_tu);
	//点赞函数
	/* const toGood = () => {
		good.value = !good.value;
		tu.value = good.value ? tu.value += 1 : tu.value -= 1;
	}; */
	//点赞
	const toGood = () => {
		good.value = !good.value;
		tu.value = good.value ? tu.value += 1 : tu.value -= 1;
		const comments = {
			comments_id: props.comments_id,
			comments_tu: tu.value,
		}
		axios({
			url: '/api/comments',
			method: 'PUT',
			params: comments
		}).then(response => {

		});
	};
	//举报状态
	const bed = ref(false);
	/* const toBed = () => {
		bed.value = !bed.value;
	}; */
	//举报
	const toBed = () => {
		bed.value = !bed.value;
		const comments_state = 3;
		const comments = {
			comments_id: props.comments_id,
			comments_state: comments_state,
		}
		axios({
			url: "/api/comments",
			method: 'PUT',
			params: comments
		}).then(response => {
			if (response.data === true) {
				ElMessage.success('举报成功');
			} else {
				ElMessage.error('举报失败');
			}
		});
	};

	//创建组件传递信息
	const comment = reactive({
		instance: null
	});
	//初始化评论内容及状态
	const init = () => {
		comment.instance = props
	};
	// 在组件挂载后初始化评论
	onMounted(() => {
		// 初始化评论
		init()
	});
	// 在组件挂载后，数据更新时，更新评论
	onUpdated(() => {
		// 销毁评论
		console.log("更新评论")

		/* comment.instance.destroy() */
		// 重新创建评论
		init()
	});
	/* // 销毁评论
	onBeforeUnmount(() => {
		comment.instance.destroy()
	}); */
</script>

<style scoped>
	.t1 {
		height: 25%;
		color: #8c939d;
	}

	;

	.t2 {
		height: 75%;
		color: #8c939d;
	}

	;
</style>